<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>抽奖</title>
    <link rel="stylesheet" type="text/css" href="../addons/jy_h5game/resource/xianchang/css/basic.css">
	
	  <style>
		#show_hide_nav{width: 100%;position: fixed;bottom: -10px;text-align: center;z-index:9998}	
		.Panel.Top{z-index:1}
	  </style>

	<script src="../addons/jy_h5game/resource/xianchang/js/tool.js" type="text/javascript" charset="utf-8"></script>
    <script src="../addons/jy_h5game/resource/xianchang/js/jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
	<style>
		.lottery-right{z-index:10}
	</style>
	<link rel="stylesheet" type="text/css" href="../addons/jy_h5game/resource/xianchang/css/screen_lottory_free.css?v=1">
<script type="text/javascript">
    var PATH_ACTIVITY = '';
</script>	  	  
<script src="../addons/jy_h5game/resource/xianchang/js/lotter_free_base.js" type="text/javascript" charset="utf-8"></script>
<script src="../addons/jy_h5game/resource/xianchang/js/screen_lottory_free.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../addons/jy_h5game/resource/xianchang/css/spinners.css" type="text/css">
</head>

<style>
#poptip { position: fixed; top:40%;left:50%;width:300px;margin-left:-150px;height: 150px;background: rgba(255, 255, 255, 0.4); opacity: 0.6;filter:alpha(opacity=0.6); color:#fff;z-index: 999;  border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
#poptip_content { position: fixed; top:40%;left:50%;width:300px;margin-left:-150px; height: 27px; color:#fff;text-align:center;font-size:14px;z-index: 9909;text-align:center;line-height:150px}
select {
    background-color: rgb(255, 255, 255);
    line-height: 40px;
    color: rgb(117, 117, 117);
    cursor: pointer;
    font-family: 微软雅黑;
    text-align: center;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    border-radius: 3px;
}
</style>
<div id="loading" style="display:none">
<div id="poptip"></div>
<div id="poptip_content">
	<div class="dots-loader"> Loading… </div>
</div>
</div>

<div >
    <div class="lottery-left"  style="width: 55%;height: 700px;top:100px;left:30px">
        <div class="lottery-title"><span class="title-label">抽奖</span><span class="usercount-label"></span></div>
        <div class="lottery-run">
            <div class="user" style="background: url({{tomedia(pagedata.item.img) || '../addons/jy_h5game/resource/xianchang/images/lot_nouser.jpg'}} );center center no-repeat; background-size: contain">
                <span  class="nick-name">{{pagedata.item.name}}</span>
            </div>

            <div class="control button-run" ng-click="cj(pagedata.item.p)" style="display: block;">开始抽奖</div>
            <div class="control button-stop" style="display: none;">停止抽奖</div>
            <div class="control button-nextround" style="display: none;">下一轮</div>
        </div>
        <div class="lottery-bottom">
            <div class="round-num">
				<input id="tag_num" type="hidden" value="" />
                <div class="select-panel" style="font-size:15px;">
					<div style="display:inline-block">选择奖项:</div>
					<select name="luckTag" ng-model="pagedata.item.p"  id="tagid"  ng-change="sele(pagedata.item.p)">
							<option value="-1">--请选择奖项--</option>
							<option value="{{k}}"   ng-repeat="(k,v) in pagedata.jx"  >{{v.prizeLevel}}</option>
							
					</select>
					<div style="display:inline-block;margin-left:20px;">选择人数:</div>
                    <!--div class="select-button minus">-</div>
                    <div class="select-value">1</div>
                    <div class="select-button plus">+</div-->
					<select ng-model="pagedata.item.num" id="num">
													<option value="1">1</option>
													<option value="2">2</option>
													<option value="3">3</option>
													<option value="4">4</option>
													<option value="5">5</option>
													<option value="6">6</option>
													<option value="7">7</option>
													<option value="8">8</option>
													<option value="9">9</option>
													<option value="10">10</option>
													<option value="11">11</option>
													<option value="12">12</option>
													<option value="13">13</option>
													<option value="14">14</option>
													<option value="15">15</option>
													<option value="16">16</option>
													<option value="17">17</option>
													<option value="18">18</option>
													<option value="19">19</option>
													<option value="20">20</option>
													<option value="30">30</option>
													<option value="40">40</option>
													<option value="50">50</option>
													<option value="60">60</option>
													<option value="70">70</option>
													<option value="80">80</option>
													<option value="90">90</option>
													<option value="100">100</option>
													<option value="200">200</option>
				</select>
                </div>
            </div>
            <!--<div class="button-showresult">全部结果</div>-->
            <div class="button-reload" onclick="javascript:window.location.reload();">重新加载</div>
        </div>

    </div>
    <div class="lottery-right" style="height: 700px;top:100px; position: relative; float: left; background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.4); padding: 3px; overflow: auto">
         <div class="lottery-title"><span class="title-label">获奖名单</span><span class="usercount-label"></span></div>
		  <div ng-repeat="(s,u) in pagedata.user" style="position: relative; width: 100%; height: 70px; margin: 3px auto; background: rgba(255, 255, 255,0.15); overflow: hidden;">
            <div style="width: 30px; height: 30px; color: #E62841; position: relative; top: 20px; text-align: center; margin-left: 10px; font-size: 16px; line-height: 30px; background-color: #FFF; border-radius: 100%;">{{s+1}}</div>
			<div style="position: absolute; display: inline-block; width: 60px; height: 60px; background: url({{tomedia(u.headImg) || '../addons/jy_h5game/resource/xianchang/images/lot_nouser.jpg'}}) center center no-repeat; background-size: contain; top: 5px; left: 50px; border-radius: 100%;"></div>
			 <div style="position: absolute; height: 60px; width: 500%; top: 0; left: 150px; overflow: visible; font-size: 20px; line-height: 60px; text-align: left; display: block; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.45);">{{u.name}}</div>
		  </div>
		
    </div>
	
	<style>
	.del_act{display:block}
	.control2 {
	width: 36%;
    height: 50px;
    position: relative;
    float: left;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
	border-top:0px;
    padding: 3px;
    overflow: auto;
    
	}
	</style>
</div>
<script type="text/javascript">
var sele=0;
var num=0;

scope.sele = function(k){
		 window.scope.pagedata.item.name=scope.pagedata.jx[k].prizeName;
		 window.scope.pagedata.item.img=scope.pagedata.jx[k].prizeImg;
		var params = {
							'plugin':'jy_h5game',
							'action':'post_data',
							'op':'cj',
							'data':{
								k:k,
								
							},
							'callback':function(data){
							
										if(data){
										 window.scope.pagedata.user=data;
										}
										 
										
										 scope.$apply();
									;
							}
				}
				scope.post_json(params);		 
				 
}
scope.cj = function(k){
	if(scope.pagedata.item.num<1 || scope.pagedata.item.num==undefined){
		alert('请选择抽奖人数');return;
	}
	if(k<0 || k==undefined){
		alert('请选择奖品');return;
	}
	var params = {
					'plugin':'jy_h5game',
					'action':'post_data',
					'op':'cj',
					'data':{
						k:k,
						num:scope.pagedata.item.num
					},
					'callback':function(data){
					
							
								 window.scope.pagedata.user=data;
								
								 scope.$apply();
							;
					}
		}
		scope.post_json(params);
}
</script>
<script>
$(function(){
	$(document).on("mouseenter", ".result-line", function () {
		$(this).find('i').addClass("del_act");
   });
   $(document).on("mouseleave", ".result-line", function () {
		$(this).find('i').removeClass("del_act");
   });
	
});

</script>

<link rel="stylesheet" type="text/css" href="../addons/jy_h5game/resource/xianchang/css/footer.css">

   <style>
	body {background: url(../addons/jy_h5game/resource/xianchang/style/all/035d.jpg) #000;background-size: cover;}
   </style>




    

  </body>
  <!--星星效果-->

 <style>
#effect{z-index:-1; position:absolute; }
 #effect {
    top: 110px;
    bottom: 81px;
    height: auto;
}
#effect {
    position: absolute;
    top: 17%;
    height: 72%;
    opacity: 1;
    width: 96%;
    left: 50%;
    margin-left: -48%;
}
	  /*星星*/
.richStar1{position:absolute; left:30px; top:140px; width:60px; opacity:0.4}
.richStar2{position:absolute; left:60px; top:30px; width:80px; opacity:0.4}
.richStar3{position:absolute; left:170px; top:30px; width:60px; opacity:0.4}

.richStar4{position:absolute; right:30px; top:140px; width:60px; opacity:0.4}
.richStar5{position:absolute; right:60px; top:30px; width:80px; opacity:0.4}
.richStar6{position:absolute; right:170px; top:30px; width:60px; opacity:0.4}

.richStar7{position:absolute; left:60px; bottom:100px; width:80px; opacity:0.4}
.richStar8{position:absolute; left:140px; bottom:30px; width:60px; opacity:0.4}

.richStar9{position:absolute; right:60px; bottom:100px; width:80px; opacity:0.4}
.richStar10{position:absolute; right:140px; bottom:30px; width:60px; opacity:0.4}

.richStar1{
	-webkit-animation:starAnimate1 2s infinite;
	animation:starAnimate1 2s infinite;
}
.richStar2{
	-webkit-animation:starAnimate1 2s 0.3s infinite;
	animation:starAnimate1 2s 0.3s infinite;
}
.richStar3{
	-webkit-animation:starAnimate1 2s 0.6s infinite;
	animation:starAnimate1 2s 0.6s infinite;
}
.richStar4{
	-webkit-animation:starAnimate1 2s infinite;
	animation:starAnimate1 2s infinite;
}
.richStar5{
	-webkit-animation:starAnimate1 2s 0.3s infinite;
	animation:starAnimate1 2s 0.3s infinite;
}
.richStar6{
	-webkit-animation:starAnimate1 2s 0.6s infinite;
	animation:starAnimate1 2s 0.6s infinite;
}
.richStar7{
	-webkit-animation:starAnimate1 2s infinite;
	animation:starAnimate1 2s infinite;
}
.richStar8{
	-webkit-animation:starAnimate1 2s 0.3s infinite;
	animation:starAnimate1 2s 0.3s infinite;
}
.richStar9{
	-webkit-animation:starAnimate1 2s infinite;
	animation:starAnimate1 2s infinite;
}
.richStar10{
	-webkit-animation:starAnimate1 2s 0.3s infinite;
	animation:starAnimate1 2s 0.3s infinite;
}
@-webkit-keyframes starAnimate1 {
  50% {
	-webkit-transform:scale(1.8);
    opacity: 1;
  }
  100% {
	-webkit-transform:scale(1);
    opacity: 0.4;
  }  
}
@keyframes starAnimate1 {
  50% {
	transform:scale(1.8);
    opacity: 1;
  }
  100% {
	transform:scale(1);
    opacity: 0.4;
  }  
}
 </style>
<script src="../addons/jy_h5game/resource/xianchang/js/stars.js"></script>
<script>
$(function(){
var obj = document.getElementById('effect');
initEffect(obj);

});
</script>


<script>
$(document).ready(function(){
	$("#show_hide_nav img").on('click',function() {
	if($("#panel_status").val()==0){
		$(this).attr("src",'../addons/jy_h5game/resource/xianchang/images/opened.png');
		hidetb();
		$("#panel_status").val("1");
	}else{
		
		showtb();
		$("#panel_status").val("0");
		$(this).attr("src",'../addons/jy_h5game/resource/xianchang/images/chosed.png');

	}
	});
	$("#bg_music").click(function(){
			if ($(this).css("background-image").indexOf('no') != '-1') {
                $("#audio").get(0).play();
				$(this).css("background-image","url({MEEPO}common/images/music.png)");
			} else {
				$("#audio").get(0).pause();
				$(this).css("background-image","url({MEEPO}common/images/no_music.png)");
			}
	});
	$("#show_qd_code").click('click',function(){
		$(".bigmpcodebar").slideUp()
		$(".show_qrcode").slideDown();
	});
	$(".show_qrcode .closebutton").on("click", function() {
			//$(".bigmpcodebar").slideUp()
			$(".show_qrcode").slideUp()
	});
});
function showtb() {
    $(".Panel.Top").css({
        top: "-" + $(".Panel.Top").height() + "px"
    });
    $(".Panel.Bottom").css({
        bottom: "-" + $(".Panel.Bottom").height() + "px"
    });
}
function hidetb() {
    $(".Panel.Top").css({
        top: 0
    });
    $(".Panel.Bottom").css({
        bottom: 0
    })
};
</script>
<input type="hidden" id="panel_status" value="1"/>



</html>